<template>
    <div class="w-full flex flex-col items-center px-8 py-10">
        <TracingBeam class="px-6">
            <div class="text-2xl font-bold mb-2 mt-6">
                相册
            </div>
            <div class="relative pt-4 antialiased">
                <div v-for="group in photoGroups" :key="group.shootDate">
                    <div class="text-lg font-bold mb-2 mt-6 flex items-center">
                        <el-icon class="mr-2 text-blue-400">
                            <Calendar />
                        </el-icon>
                        {{ group.shootDate }}
                    </div>
                    <div class="grid lg:grid-cols-3 gap-4">
                        <div v-for="(item, idx) in group.photos" :key="item.photoId" class="cursor-pointer"
                            @click="openPreview(group.photos, idx)">
                            <el-image v-if="item.imageUrl" :src="item.imageUrl" :alt="item.title"
                                class="rounded-lg object-cover w-full h-60" fit="cover" />
                        </div>
                    </div>
                </div>
            </div>
        </TracingBeam>
        <PhotoPreview v-if="previewPhotos.length" :photos="previewPhotos" :visible="previewVisible"
            :startIndex="previewIndex" @close="closePreview" />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import PhotoPreview from './modules/PhotoPreview.vue';
import { getPhotoGroupByDatePage, type PhotoGroupVO, type PhotoVO } from '@/api/photos';
import { Calendar } from '@element-plus/icons-vue';

const photoGroups = ref<PhotoGroupVO[]>([]);
const page = ref(1);
const size = ref(7);
const total = ref(0);

const previewVisible = ref(false);
const previewPhotos = ref<PhotoVO[]>([]);
const previewIndex = ref(0);

const fetchPhotos = async () => {
    const res = await getPhotoGroupByDatePage({ page: page.value, size: size.value });
    if (res.code === 200) {
        photoGroups.value = res.data;
        total.value = res.total;
    }
};

const openPreview = (photos: PhotoVO[], idx: number) => {
    console.log(photos);
    previewPhotos.value = photos;
    previewIndex.value = idx;
    previewVisible.value = true;
};
const closePreview = () => {
    previewVisible.value = false;
    previewPhotos.value = [];
    previewIndex.value = 0;
};

onMounted(fetchPhotos);
</script>